<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title>与牛共舞</title>
</head>
<body>

<div id="container" class="ub ub-ver">
    <div id="robotContainer" class="ub-f">

    </div>
    <div id="inputFooter"></div>
</div>


<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="conf/config.js"></script>
<script type="text/javascript" src="js/faces/emojis.js"></script>
<script type="text/javascript" src="js/underscore-min.js"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/html" id="tpl_members">
    <%var Lis = obj%>
    <%if(Lis && Lis.length){%>
    <div class="members">
        <%_.each(Lis, function(item, index){%>
        <span><%=item%></span>
        <%if(index < Lis.length-1){%>
        、
        <%}%>
        <%});%>
        &nbsp;&nbsp;加入群聊
    </div>
    <%}%>
</script>
<script type="text/html" id="tpl_chatLis">
    <%var chatObj = obj%>
    <%var chatMsg = chatObj.msg%>
    <%if(chatObj.name == "我"){%>
    <div class="chatLine ub">
        <div class="right ub-f ub ub-ver ub-ae">
            <div class="robotName"><%=userName%></div>
            <div class="chatText">
                <%if(chatMsg.type == "img"){%>
                <img class="image" src="<%=chatMsg.content%>">
                <%} else {%>
                <%=strToHtmlEmoji(chatMsg.content)%>
                <%}%>
                <div class="chatAngle"></div>
            </div>
        </div>
        <div class="robotAvatar"><img src="<%=userAvatarUrl%>"></div>
    </div>
    <%} else {%>
    <div class="chatLine ub">
        <div class="robotAvatar"><img src="<%=chatObj.avatarUrl%>"></div>
        <div class="left ub-f">
            <div class="robotName"><%=chatObj.name%></div>
            <div class="chatText">
                <%if(chatMsg.type == "img"){%>
                <img class="image" src="<%=chatMsg.content%>">
                <%} else {%>
                <%=strToHtmlEmoji(chatMsg.content)%>
                <%}%>
                <div class="chatAngle"></div>
            </div>
        </div>
    </div>
    <%}%>
</script>
<script type="text/javascript">
    var userName = "我";
    var userAvatarUrl = "";
    var APP_ID = weiXinConf.appId;
    var APP_SECRET = weiXinConf.appSecret;
    var $container = $('#robotContainer');
    $(document).ready(function () {
        var ua = navigator.userAgent.toLowerCase();
        //判断是否在微信中打开
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
            getUserInfo();
        } else {
            getRobots();
        }
    });

    //获取机器人和对话信息
    function getRobots() {
        $.getJSON("conf/data.json", function (data) {
            var members = data.members;//成员
            var chatLis = data.chatLis;//对话
            var chatShortDelay = data.chatShortDelay;//间隔时间
            var chatInterval = data.chatInterval;//间隔时间
            $.each(chatLis, function (index, item) {
                var itemImgUrl = item.avatarUrl;
                if (itemImgUrl) {
                    preLoadImg(itemImgUrl);
                }
            });
            setTemplate(members, "tpl_members");
            setTimeout(function () {
                setTemplate(chatLis[0], "tpl_chatLis");
                setTimeout(function () {
                    setTemplate(chatLis[1], "tpl_chatLis");
                }, chatShortDelay);
                var i = 2;
                var thisInterval = setInterval(function () {
                    setTemplate(chatLis[i], "tpl_chatLis");
                    i++;
                    if (i > chatLis.length - 1) {
                        clearInterval(thisInterval);
                    }
                }, chatInterval)

            }, chatShortDelay);

        });
    }

    //获取微信用户信息
    function getUserInfo() {
        if (!sessionStorage.getItem('index.renew')) {
            sessionStorage.setItem('index.renew', 1);
            //拉取登录页面，并重定向
            window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + APP_ID + "&redirect_uri=" + REDIRECT_URL + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
            return;
        }
        sessionStorage.removeItem('index.renew');
        var code = getLocHrefStr("code");
        $.ajax({
            url: "php/getWeiXinInfo.php",
            type: "POST",
            data: {
                code: code,
                appId: APP_ID,
                appSecret: APP_SECRET
            },
            dataType: "json",
            success: function (data) {
                userName = data.nickname;
                userAvatarUrl = data.headimgurl;
                weiXinSdk();
                getRobots();
            },
            error: function (err) {
//                alert(JSON.stringify(err));
            }
        });
    }

    //获取当前页面地址的参数值
    function getLocHrefStr(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = decodeURI(window.location.search.substr(1)).match(reg);//对中文解码
        if (r != null) return unescape(r[2]);
        return null;
    }

    //填充模板 依赖underscore-min.js
    function setTemplate(data, tplId) {
        //填充模板
        var template = _.template($('#' + tplId).html());
        var html = template({
            obj: data
        });
        $container.append(html);
        $container.scrollTop($container[0].scrollHeight);
    }

    function weiXinSdk() {

        wx.ready(function () {
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

            var shareTitle = _shareTitle;//分享标题
            var shareDesc = _shareDesc;//分享描述
            var shareLink = _shareLink;//分享链接
            var shareImgUrl = _shareImgUrl;//分享图片

            //分享朋友圈
            wx.onMenuShareTimeline({
                title: shareTitle, // 分享标题
                link: shareLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: shareImgUrl, // 分享图标
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
            //分享朋友
            wx.onMenuShareAppMessage({
                title: shareTitle, // 分享标题
                desc: shareDesc, // 分享描述
                link: shareLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: shareImgUrl, // 分享图标
                type: '', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
            //分享qq
            wx.onMenuShareQQ({
                title: shareTitle, // 分享标题
                desc: shareDesc, // 分享描述
                link: shareLink, // 分享链接
                imgUrl: shareImgUrl, // 分享图标
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
            //分享微博
            wx.onMenuShareWeibo({
                title: shareTitle, // 分享标题
                desc: shareDesc, // 分享描述
                link: shareLink, // 分享链接
                imgUrl: shareImgUrl, // 分享图标
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
            //分享QQ空间
            wx.onMenuShareQZone({
                title: shareTitle, // 分享标题
                desc: shareDesc, // 分享描述
                link: shareLink, // 分享链接
                imgUrl: shareImgUrl, // 分享图标
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
        });

        //获取签名
        $.ajax({
            url: "php/getWeiXinSDk.php",
            type: "POST",
            data: {
                appId: APP_ID,
                appSecret: APP_SECRET,
                locUrl: window.location.href
            },
            dataType: "json",
            success: function (res) {
                var timestamp = res.timestamp;//服务时间戳
                var nonceStr = res.nonceStr;//随机字符串
                var signature = res.signature;//加密签名
                var expires_in = res.expires_in;//有效期
                var locUrl = res.locUrl;//当前页面网址
                //通过config接口注入权限验证配置
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: APP_ID, // 必填，公众号的唯一标识
                    timestamp: timestamp, // 必填，生成签名的时间戳
                    nonceStr: nonceStr, // 必填，生成签名的随机串
                    signature: signature,// 必填，签名
                    jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ", "onMenuShareWeibo", "onMenuShareQZone"] // 必填，需要使用的JS接口列表
                });
            },
            error: function (err) {
//                alert(JSON.stringify(err));
            }
        });
    }


    //图片预加载
    function preLoadImg(url) {
        var img = new Image();
        img.src = url;
    }

</script>
</body>
</html>